<template>
  <article v-if="article" class="article-detail">
    <header>
      <ElBreadcrumb separator="/">
        <ElBreadcrumbItem to="/">首页</ElBreadcrumbItem>
        <ElBreadcrumbItem to="/guides">健康指南</ElBreadcrumbItem>
        <ElBreadcrumbItem>{{ article.title }}</ElBreadcrumbItem>
      </ElBreadcrumb>
      <h1>{{ article.title }}</h1>
      <p class="summary">{{ article.summary }}</p>
      <img :src="article.coverImage" :alt="article.title" />
    </header>
    <section class="body" v-html="article.body"></section>
  </article>
  <section v-else class="missing">
    <ElEmpty description="未找到对应文章">
      <ElButton type="primary" @click="goGuides">返回指南</ElButton>
    </ElEmpty>
  </section>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElBreadcrumb, ElBreadcrumbItem, ElEmpty, ElButton } from 'element-plus';
import { useContentStore } from '../stores/content';

const route = useRoute();
const router = useRouter();
const contentStore = useContentStore();

const article = computed(() => contentStore.articleById(String(route.params.id)));

const goGuides = () => router.push({ name: 'guides' });
</script>

<style scoped>
.article-detail {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.article-detail img {
  border-radius: 16px;
  max-height: 360px;
  object-fit: cover;
  width: 100%;
}

.summary {
  color: var(--mint-text-muted);
}

.body :deep(p) {
  line-height: 1.75;
  margin-bottom: 16px;
}

.missing {
  display: flex;
  justify-content: center;
  padding: 60px 0;
}
</style>
